<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Fetch</title>
	</head>
	<body>
		<script>
			// fetch语法：url 要访问的URL。options 可选参数：method, header 等。
			// let promise = fetch(url, [options])
			// 注：如果没有提供 options 参数，这就是一个简单的 GET 请求，下载 url 内容。

			// fetch 请求分为两个阶段：
			// 1. 第一阶段：当服务器发送了响应头，fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析。
			// 在第一阶段完成后，我们可以通过检查响应头，来检查 HTTP 状态以确定请求是否成功，现阶段还没有响应体。

			// 2.第二阶段：为了获取 response body 我们需要使用一个其他的方法调用。
			// Response 提供了多种基于 promise 的方法，来以不同的格式访问 body：
			// response.text() 读取 response，并以文本形式返回 response。
			// response.json() 将 response 解析为 JSON 格式。
			// response.formData() 以 FormData 对象的形式返回。
			// response.blob() 以 Blob 对象的形式返回 response。
			// response.arrayBuffer() 以 ArrayBuffer（低级别的二进制数据）形式返回 response。
			// 注：response 响应的内容只能被以上方法处理一次，再次调用其他方法会失败。
		</script>

		<script>
			;(async () => {
				let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
				let text = await response.text() // 将 response body 读取为文本

				console.log('text', typeof text)
				console.log(text.slice(0, 80) + '...')
			})()
		</script>

		<script>
			// 设置请求头示例

			let user = {
				name: 'John',
				surname: "Smith"
			}

			let response = await fetch('request-url', {
				method:"POST",
				// 设置请求头
				headers:{
					"Content-Type": 'application/json;charset=utf-8' // 请求参数类型为 JSON 格式
					// "Content-Type": 'multipart/form-data', // 请求参数类型为 file 格式
					// "Content-Type": 'text/plain;charset=UTF-8', // 请求参数如果为字符串默认就是这个格式
				},

				// 设置请求体
				body: JSON.stringify(user)
				// body: new FormData(FileObject)
			})
		</script>

		<script>
			// 总结：

			// 典型的 fetch 请求由两个 await 调用组成：
			// let response = await fetch(url, options); // 第一个请求，解析 response header 可以判断请求是否成功。
			// let result = await response.json(); // 第二个请求，将 body（响应体的数据） 读取为 json 格式或其他格式。

			// 响应的属性：
			// response.status —— response 的 HTTP 状态码，
			// response.ok —— HTTP 状态码为 200-299，则为 true。
			// response.headers —— 类似于 Map 的带有 HTTP header 的对象。

			// 获取 response body 的方法：
			// response.text() —— 读取 response，并以文本形式返回 response，
			// response.json() —— 将 response 解析为 JSON 对象形式，
			// response.formData() —— 以 FormData 对象（multipart/form-data 编码，参见下一章）的形式返回 response，
			// response.blob() —— 以 Blob（具有类型的二进制数据）形式返回 response，
			// response.arrayBuffer() —— 以 ArrayBuffer（低级别的二进制数据）形式返回 response。
			//
		</script>
	</body>
</html>
